<script setup>
import { ref , watch} from 'vue'
import { useMouseInElement } from "@vueuse/core";

const currIndex = ref(0)

const prop=defineProps({
  images: {
    type: Array,
    default: () => []
  }
})

// 2、获取鼠标相对位置
const target = ref(null);
// isOutside 表示鼠标是否移出盒子
const { elementX, elementY, isOutside } = useMouseInElement(target);

// 3、控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化，重新设置left/top）
const left = ref(0); // 滑块坐标
const top = ref(0); // 滑块坐标
// 大图坐标
const positionX = ref(0);
const positionY = ref(0);

// 监听滑块移动
watch([elementX, elementY], () => {
  //console.log("X和Y的值为：", elementX, elementY);
  // 有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 400) {
    left.value = elementX.value - 100; // 100 是小滑块宽度的一半
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 400) {
    top.value = elementY.value - 100;
  }
  // 处理边界
  if (elementX.value > 400) {
    left.value = 300;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 400) {
    top.value = 300;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }
  // 控制大图显示
  positionX.value = -(left.value*2.5) ;
  positionY.value = -(top.value*2.5) ;
});

</script>
<template>
  <div class="goods-image">
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img,index) in prop.images" :key="img" :class="{active:index===currIndex}">
        <img style="width: 70px;height: 70px;border-radius: 7px" @mouseenter="currIndex=index" :src=img alt="">
      </li>
    </ul>

    <!-- 右侧大图-->
    <div class="middle" ref="target">
      <img style="width: 500px;height: 500px;border-radius: 10px" :src="images[currIndex]" alt="">

      <!-- 蒙层小滑块 -->
      <div
          class="layer"
          v-show="!isOutside"
          :style="{ left: `${left}px`, top: `${top}px` }"
      ></div>

      <!-- 放大镜大图 -->
      <div
          class="large"
          v-show="!isOutside"
          :style="[
        {
          backgroundImage: `url(${images[currIndex]})`,
          backgroundSize:`250% 250%`,
          backgroundPositionX: `${positionX}px`,
          backgroundPositionY: `${positionY}px`,
        },
      ]"
      ></div>

    </div>



  </div>
</template>

<style scoped lang="less">
.goods-image {

  width: 600px;
  height: 500px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;

  .middle {
    width: 500px;
    height: 500px;
    background: #ffffff;
    border-radius: 10px;

    position: relative;
  }
  .small {
    list-style: none;
    width: 100px;
    margin: 0;
    padding: 0;
    li {
      //display:inline;

      width: 70px;
      height: 70px;
      margin-left: 0;
      margin-bottom: 15px;
      cursor: pointer;
      &:hover,&.active {
        border: 2px solid #1fe343;
        border-radius: 7px;
      }
    }
  }
}

.layer{
  width: 200px;
  height: 200px;
  background-color: rgba(219, 225, 231, 0.52);
  position: absolute;
  z-index: 999;
}
.layer:hover{
  cursor: all-scroll;
}
.large{
  width: 500px;
  height:500px;
  //background-color: #00a4fd;
  position: absolute;
  border-radius: 10px;
  left: 520px;
  top: 0;
  z-index: 999;
}
</style>
